<template>
	<div class="c-address">
		<Select v-model="data.province_code" :datas="view_data[1]"  :autosize="false" @change="intProvince" ></Select>
		<Select v-model="data.city_code" :datas="view_data[data.province_code] || []"  :autosize="false" @change="intCity" ></Select>
		<Select v-model="data.area_code" :datas="view_data[data.city_code] || []"  :autosize="false" @change="intArea" ></Select>
	</div>
</template>
<script type="text/javascript">
	import address from './json/areaCode.json'
	export default {
		data (){
			return {
				// 行政区
				data:{
					province_code:'',					// 省编码
					city_code:'',						// 市编码
					area_code:'',						// 区编码
				},

				// 渲染数据
				view_data:{
					1:[]
				},

				// 返回数据
				ret:{
					"province":"",
					"city":"",
					"area":""
				},
			}
		},
		props:{
			// 取值模式
			// @text    行政名称模式
			// @code    行政编码模式
			mode:{
				type:String,
				default:'text'
			},
			//
			value:{
				type:[Array,Object],
				default:()=>{
					return {};
				}
			}

		},
		watch:{
			value:{
				handler(val,old){
					this.intDefault(val);
				},
				deep:true
			}
		},
		mounted(){
			// 数据处理 
    		this.intData();

    		//默认值
    		this.intDefault(this.value);
		},
		methods:{
			intDefault(val){
				if(JSON.stringify(val) == '{}'){
					val = {
						"province":"",
						"city":"",
						"area":""
					}
				}

				if(this.mode == 'code'){
					this.data.province_code = val.province;
					this.data.city_code = val.city;
					this.data.area_code = val.area
				}else{
					address.forEach(item => {
						// 当数据存在时
						if(val.province == item.title){
							this.data.province_code = item.code;
						}else if(val.city == item.title){
							this.data.city_code = item.code;
						}else if(val.area == item.title){
							this.data.area_code = item.code
						}
					})

					if(!val.province){
					 	this.data.province_code = '';
					}
					if(!val.city){
						this.data.city_code = '';
					}
					if(!val.area){
						this.data.area_code = '';
					}
				}

				this.ret = val;
			},


		    /**
		     * 数据处理
		     * @return {[type]} [description]
		     */
		    intData(){
		      let obj = {};
		      address.map((item,index) =>{
		          item['key'] = item.code;
		          if(!obj.hasOwnProperty(item.upcode)){
		            obj[item.upcode] = [item]
		          }else{
		            obj[item.upcode].push(item);
		          }
		      })
		      this.view_data = obj;
		    },


		    /**
		     * 省
		     * @return {[type]} [description]
		     */
		    intProvince(data){
				this.data.city_code = '';
				this.data.area_code = '';
				this.ret.city = "";
				this.ret.area = "";
				if(!data){
					return false;
				}

		    	if(this.mode == 'code'){
		    		this.ret['province'] = data["code"]
		    	}else{
		    		this.ret['province'] = data["title"]
		    	}
		    	this.$emit('input',this.ret)
		    },

		    /**
		     * 市
		     * @return {[type]} [description]
		     */
		    intCity(data){
				this.data.area_code = '';
				this.ret.area = "";
				if(!data){
					return false;
				}

		    	if(this.mode == 'code'){
		    		this.ret['city'] = data["code"]
		    	}else{
		    		this.ret['city'] = data["title"]
		    	}
		    	this.$emit('input',this.ret)
		    },

		    /**
		     * 区
		     * @return {[type]} [description]
		     */
		    intArea(data){
		    	if(this.mode == 'code'){
		    		this.ret['area'] = data["code"]
		    	}else{
		    		this.ret['area'] = data["title"]
		    	}
		    	this.$emit('input',this.ret)
		    },
		}


	}
</script>
<style type="text/css" lang="less">
	.c-address{
		width: 100%;
		display: flex; 
		align-items: center;
		justify-content: flex-start;
		.h-select{
			margin-right: 10px;
			&:last-child{
				margin-right:0px;
			}
		}


	}
</style>